<template>
    <div class="homework">
        <Header></Header>
        <div class="homework-box">
            <div class="work-area">
                <!-- <CodeMode></CodeMode> -->
                <a-carousel arrows>
                    <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; z-index: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px; z-index: 1">
                        <a-icon type="right-circle" />
                    </div>
                    <img v-for="(item, index) in workList" :key="index" :src="item" alt="">
                </a-carousel>
            </div>
            <div class="work-score">
                <div class="new-work">
                    <h3>{{ workObj.name }}</h3>
                    <div class="time">
                        <p>{{ workObj.student_name }}</p>
                        <div style="display: flex; align-items: center; margin-left: 10px">
                            <img src="../../assets/icons/time.png" alt="">
                            <span>{{ workObj.create_time_text }}</span>
                        </div>
                    </div>
                    <p>班级：{{ workObj.class_name }}</p>
                    <!-- <p>作品类型：海龟编辑器</p> -->
                    <p>评分状态：{{ workObj.score_status == 0 ? '未评分' : '已评分' }}</p>
                </div>
                <div class="weidu">
                    <p class="title">纬度评分</p>
                    <div class="rate-item">
                        <span>创新思维</span>
                        <a-rate v-model="formData.score_sw" />
                    </div>
                    <div class="rate-item">
                        <span>艺术设计</span>
                        <a-rate v-model="formData.score_sj" />
                    </div>
                    <div class="rate-item">
                        <span>逻辑分析</span>
                        <a-rate v-model="formData.score_fx" />
                    </div>
                    <div class="rate-item">
                        <span>编程技术</span>
                        <a-rate v-model="formData.score_js" />
                    </div>
                </div>
                <div class="pingyu">
                    <p class="title">评语</p>
                    <a-textarea v-model="formData.comment" placeholder="请输入评语，最多400字" allow-clear :auto-size="{ minRows: 2, maxRows: 6 }" />
                </div>
                <div class="zongfen">
                    <p class="title">总分评分</p>
                    <a-rate v-model="formData.score" />
                </div>
                <div class="kuaijie" v-if="sourceType != 'student'">
                    <p class="title">快捷评分</p>
                    <div class="kjitem">
                        <span v-for="item in commentList" :key="item" @click="quickComment(item)">{{item}}</span>
                    </div>
                </div>
                <div class="btnlist" v-if="sourceType != 'student'">
                    <button @click="goBack">返回列表</button>
                    <button @click="submitHomework">保存</button>
                    <!-- <button>下一份</button> -->
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import CodeMode from "../../components/ProgramCode/CodeMode.vue";
export default {
    name: 'myHomework',
    components: {
        Header,
        Footer,
        CodeMode
    },
    data() {
        return {
            commentList: ['完美之作', '整体优异', '表现良好', '仍需努力', '技术高超，创意不足', '设计精美，逻辑欠佳', '逻辑清晰，美感不足'],
            formData:{
                id: '',
                score: 0,
                score_sw: 0,
                score_sj: 0,
                score_fx: 0,
                score_js: 0,
                comment: ''
            },
            workObj: {},
            workList: [],
            sourceType: ''
        }
    },
    created() {
        this.workObj = JSON.parse(this.$route.query.workObj);
        this.sourceType = this.$route.query.source;
        this.workList = this.workObj.file_path.split(',');
        console.log(this.workObj, 'workObjworkObj');
        this.formData.comment = this.workObj.comment;
        this.formData.score = this.workObj.score / 20;
        this.formData.score_sw = this.workObj.score_sw / 20;
        this.formData.score_sj = this.workObj.score_sj / 20;
        this.formData.score_fx = this.workObj.score_fx / 20;
        this.formData.score_js = this.workObj.score_js / 20;
    },
    methods: {
        quickComment (item) {
            this.formData.comment = item;
        },
        submitHomework() {
            this.formData.id = this.workObj.id;
            if (this.formData.score == 0) {
                this.$message.error('请先评分！')
                return
            }
            if (this.formData.comment == '') {
                this.$message.error('请填写评语！')
                return
            }
            this.formData.score = this.formData.score * 20;
            this.formData.score_sw = this.formData.score_sw * 20;
            this.formData.score_sj = this.formData.score_sj * 20;
            this.formData.score_fx = this.formData.score_fx * 20;
            this.formData.score_js = this.formData.score_js * 20;
            this.$request.post('api/edu/teacher_comment_homework', this.formData).then(res => {
                if (res.code == 1) {
                    this.$message.success('评分成功！')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        goBack() {
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="less" scoped>
.homework-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    margin-top: 80px;
    .work-area{
        width: calc(100% - 370px);
        height: auto;
        overflow: auto;
    }
    .work-score{
        width: 340px;
        background: #FFFDF4;
        text-align: left;
        padding-left: 30px;
        .title{
            font-weight: 700;
            font-size: 18px;
            color: #000000;
        }
        .new-work{
            margin-top: 15px;
            h3{
                font-weight: 700;
                font-size: 20px;
                color: #101010;
                word-break: break-all;
            }
            p{
                font-weight: 400;
                font-size: 14px;
                color: #787878;
                margin-bottom: 0px;
                line-height: 30px;
            }
            .time{
                display: flex;
                align-items: center;
                // margin-bottom: 20px;
                img{
                    width: 14px;
                    height: 14px;
                    margin-right: 10px;
                }
                span{
                    font-weight: 400;
                    font-size: 14px;
                    color: #787878;
                }
            }
        }
        .weidu{
            margin-top: 30px;
            .rate-item{
                span{
                    font-weight: 400;
                    font-size: 14px;
                    color: #787878;
                    padding-right: 10px;
                }
            }
        }
        .pingyu{
            margin-top: 30px;
        }
        .zongfen{
            margin-top: 30px;
        }
        .kuaijie{
            margin-top: 30px;
            .kjitem{
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                span{
                    padding: 6px 7px;
                    background: rgba(255,247,206,0.3);
                    border-radius: 10px;
                    border: 1px solid #FFD800;
                    font-weight: 400;
                    font-size: 14px;
                    color: #503F00;
                    margin-bottom: 10px;
                    cursor: pointer;
                }
            }
        }
        .btnlist{
            margin-top: 30px;
            button{
                width: 92px;
                height: 40px;
                background: #FFD800;
                border-radius: 10px;
                font-weight: 500;
                font-size: 17px;
                color: #FFFFFF;
                cursor: pointer;
                border: none;
                margin-right: 10px;
                &:last-child{
                    margin-right: 0px !important;
                }
            }
        }
    }
    /deep/ textarea.ant-input{
        width: 326px;
        height: 74px;
        background: rgba(255,247,206,0.3);
        border-radius: 10px;
        border: 1px solid #FFD800;
    }
}
</style>
<style lang="less">
.homework-box{
    .ant-rate{
        font-size: 20px;
        .ant-rate-star{
            margin-right: 10px;
        }
    }
}
.ant-carousel .slick-slide {
  text-align: center;
  overflow: hidden;
}

.ant-carousel .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #666666;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 1;
}
.ant-carousel .slick-slide img {
  width: auto !important;
  height: 100%;
}
</style>